<script setup lang="ts">
import {reactive, ref} from 'vue'
import Room from "./Room.vue";
const state=reactive({
  roomNum:'03',
  itemData:[
    {
      id:'A01',
      name:'A1',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'A02',
      name:'A2',
      checkState:false,
      disabled:true,
      buyStatus:false,
    },
    {
      id:'A03',
      name:'A3',
      checkState:false,
      disabled:true,
      buyStatus:false,
    },
    {
      id: 'A04',
      name: 'A4',
      checkState: false,
      disabled:true,
      buyStatus:false,
    },{
      id:'B01',
      name:'B1',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'B02',
      name:'B2',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'B03',
      name:'B3',
      checkStBte:false,
      disabled:true,
      buyStatus:false,
    },
    {
      id:'B04',
      name:'B4',
      checkState:false,
      disabled:true,
      buyStatus:false,
    },
    {
      id:'C01',
      name:'C1',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'C02',
      name:'C2',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'C03',
      name:'C3',
      checkState:false,
      disabled:false,
      buyStatus:false,

    },
    {
      id:'C04',
      name:'C4',
      checkState:false,
      disabled:false,
      buyStatus:false,

    },
    {
      id:'D01',
      name:'D1',
      checkState:false,
      disabled:false,
      buyStatus:false,

    },
    {
      id:'D02',
      name:'D2',
      checkState:false,
      disabled:false,
      buyStatus:false,

    },
    {
      id:'D03',
      name:'D3',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'D04',
      name:'D4',
      checkState:false,
      disabled:true,
      buyStatus:false,
    },
    {
      id:'D01',
      name:'E1',
      checkStBte:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'E02',
      name:'E2',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'E03',
      name:'E3',
      checkState:false,
      disabled:false,
      buyStatus:true,
    },
    {
      id:'E04',
      name:'E4',
      checkState:false,
      disabled:false,
      buyStatus:true,
    }
  ]
})

const getCheckData=(data)=>{
  console.log(data);
}
const changeData=()=>{
  state.roomNum='05';
  state.itemData=[
    {
      id:'A01',
      name:'A1',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'A02',
      name:'A2',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'A03',
      name:'A3',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id: 'A04',
      name: 'A4',
      checkState: false,
      disabled:true,
      buyStatus:false,
    },{
      id:'B01',
      name:'B1',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'B02',
      name:'B2',
      checkState:false,
      disabled:false,
      buyStatus:true,
    },
    {
      id:'B03',
      name:'B3',
      checkStBte:false,
      disabled:false,
      buyStatus:true,
    },
    {
      id:'B04',
      name:'B4',
      checkState:false,
      disabled:true,
      buyStatus:false,
    },
    {
      id:'C01',
      name:'C1',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'C02',
      name:'C2',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'C03',
      name:'C3',
      checkState:false,
      disabled:false,
      buyStatus:false,

    },
    {
      id:'C04',
      name:'C4',
      checkState:false,
      disabled:false,
      buyStatus:false,

    },
    {
      id:'D01',
      name:'D1',
      checkState:false,
      disabled:false,
      buyStatus:false,

    },
    {
      id:'D02',
      name:'D2',
      checkState:false,
      disabled:false,
      buyStatus:false,

    },
    {
      id:'D03',
      name:'D3',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'D04',
      name:'D4',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'D01',
      name:'E1',
      checkStBte:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'E02',
      name:'E2',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'E03',
      name:'E3',
      checkState:false,
      disabled:false,
      buyStatus:true,
    },
    {
      id:'E04',
      name:'E4',
      checkState:false,
      disabled:false,
      buyStatus:true,
    }
  ]
}

const changeData2=()=>{
  state.roomNum='08';
  state.itemData=[
    {
      id:'A01',
      name:'A1',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'A02',
      name:'A2',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'A03',
      name:'A3',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id: 'A04',
      name: 'A4',
      checkState: false,
      disabled:true,
      buyStatus:false,
    },{
      id:'B01',
      name:'B1',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'B02',
      name:'B2',
      checkState:false,
      disabled:false,
      buyStatus:true,
    },
    {
      id:'B03',
      name:'B3',
      checkStBte:false,
      disabled:false,
      buyStatus:true,
    },
    {
      id:'B04',
      name:'B4',
      checkState:false,
      disabled:true,
      buyStatus:false,
    },
    {
      id:'C01',
      name:'C1',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'C02',
      name:'C2',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'C03',
      name:'C3',
      checkState:false,
      disabled:false,
      buyStatus:false,

    },
    {
      id:'C04',
      name:'C4',
      checkState:false,
      disabled:false,
      buyStatus:true,

    },
    {
      id:'D01',
      name:'D1',
      checkState:false,
      disabled:false,
      buyStatus:true,

    },
    {
      id:'D02',
      name:'D2',
      checkState:false,
      disabled:false,
      buyStatus:false,

    },
    {
      id:'D03',
      name:'D3',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'D04',
      name:'D4',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'D01',
      name:'E1',
      checkStBte:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'E02',
      name:'E2',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'E03',
      name:'E3',
      checkState:false,
      disabled:false,
      buyStatus:false,
    },
    {
      id:'E04',
      name:'E4',
      checkState:false,
      disabled:false,
      buyStatus:false,
    }
  ]
}
</script>

<template>
  <room :items="state.itemData" :roomNum="state.roomNum"  @submit="getCheckData" ></room>
  <view style="display: flex;justify-content: center;padding-top:16px;border-top:1px solid #ddd;margin-top:20px;">
    <van-button type="primary" @click="changeData">改变组件初始化数据05</van-button>
    <van-button type="primary" @click="changeData2" style="margin-left:10px">改变组件初始化数据08</van-button>
  </view>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
